<template>
  <div class="input__number-select">
    <input-number
      v-model="valInput"
      size="mini"
      :min="0"
      :controls="false"
      @change="handleChangeInput"
    />
    <el-select
      v-model="valSelect"
      placeholder="请选择"
      size="mini"
      @change="handleChangeSelect"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      />
    </el-select>
  </div>
</template>
<script>
import InputNumber from '@/components/inputNumber/inputNumber';
import {
  DATE_TYPES_ENUMS,
  DATE_TYPES_OPTIONS
} from './constants';
export default {
  name: 'ShelfLife', // 保质期下拉输入
  components: { InputNumber },
  props: {
    inputValue: {
      type: Number,
      default: null
    },
    selectValue: {
      type: Number,
      default: DATE_TYPES_ENUMS.Day
    }
  },
  data () {
    return {
      valInput: null,
      valSelect: null,
      options: DATE_TYPES_OPTIONS
    }
  },
  watch: {
    inputValue: {
      handler (val) {
        this.valInput = val
      },
      immediate: true
    },
    selectValue: {
      handler (val) {
        this.valSelect = val
      },
      immediate: true
    }
  },
  methods: {
    // 输入框change
    handleChangeInput () {
      this.$emit('input', this.valInput)
    },
    // 下拉change
    handleChangeSelect () {
      this.valInput = null
      this.$emit('input', this.valInput)
      this.$emit('select', this.valSelect)
    }
  }
}
</script>
<style lang="less" scoped>
.input__number-select {
  display: flex;
}
/deep/ .el-input-number {
  flex: 1;
  input {
    border-right: none;
    border-radius: 4px 0 0 4px;
  }
}
/deep/ .el-select {
  flex: 1;
  input {
    border-radius: 0 4px 4px 0;
  }
}
</style>
